<template>
  <div class="login-form">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          placeholder="请输入用户名"
        />

        <div class="login-form-send-message">
          <van-field
            v-model="verifyCode"
            type="password"
            name="验证码"
            placeholder="验证码"
          >
          </van-field>
          <span
            class="login-form-send-message-tips"
            :style="{ 'pointer-events': isSend ? 'none' : 'auto' }"
            @click="sendMessage"
          >
            {{ messageTips }}
          </span>
        </div>

        <van-button
          round
          block
          type="primary"
          native-type="submit"
          style="margin: 10px 0 20px 0; border-radius: var(--border-radius)"
        >
          登录
        </van-button>

        <div class="login-form-other-way">账号密码登录</div>
      </van-cell-group>
    </van-form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Toast } from "vant";
const username = ref<string>("");
const verifyCode = ref<string>("");
const messageTips = ref<string>("获取验证码");
const countTime = ref<number>(10);
const isSend = ref<boolean>(false);
const timerId = ref<number | undefined>(undefined);

// 提交表单
const onSubmit = () => {
  setTimeout(() => {
    Toast("已经提交了");
  }, 1000);
};

// 发送验证码
const sendMessage = () => {
  Toast("验证码已发送");
  isSend.value = true;
  messageTips.value = countTime.value + "s";
  timerId.value = setInterval(() => {
    countTime.value--;
    messageTips.value = countTime.value + "s";
    if (countTime.value <= 0) {
      clearInterval(timerId.value);
      timerId.value = undefined;
      isSend.value = false;
      countTime.value = 10;
      messageTips.value = "获取验证码";
    }
  }, 1000);
};
</script>

<style lang="less" scoped>
.login-form {
  padding: 20px 15px;
  background-color: var(--background-color-std-11);
  border-radius: var(--border-radius);
  box-shadow: 0 0 5px var(--box-shadow-color);

  :deep .van-form .van-cell-group {
    padding-top: 15px;
  }

  :deep .van-field__error-message {
    margin: 5px 10px;
    height: 14px;
    font-size: 12px;
  }

  :deep .van-cell {
    padding: 10px 0;
  }

  :deep .van-field__control {
    border: none;
    padding: 9px 25px;
    border-radius: var(--border-radius);
    background-color: var(--background-color-std-12);
    color: var(--font-color-std-6);
  }

  :deep .van-cell:after {
    border-bottom: none;
  }

  &-send-message {
    position: relative;

    &-tips {
      position: absolute;
      top: 50%;
      right: 15px;
      font-size: 12px;
      color: var(--font-color-std-5);
      transform: translateY(-50%);
    }
  }

  &-other-way {
    text-align: center;
    font-size: 14px;
    color: var(--font-color-std-6);
  }
}
</style>
